<template>
  <div id="search">
    <div class="top">
      <form action="/">
        <van-search
          v-model="searchValue"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>

    <!-- 搜索结果 -->
    <div
      class="box"
      v-for="value in shopList"
      v-if="haveShop"
      :key="value.id"
      @click="toShopMsg(value)"
    >
      <van-badge :content="value.productLabel" class="hotBadge">
        <img :src="value.productIcon" alt="" />
        <div class="fiveSela" v-if="value.productDescribe != ''">
          {{ value.productDescribe }}
        </div>
      </van-badge>
      <span>{{ value.productName }}</span>
    </div>

    <!-- 历史搜索 -->
    <div class="oldSearch" v-if="!haveShop">
      <h3>
        历史搜索
        <img
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/clear.png"
          alt=""
          @click="clearOldSearch"
        />
      </h3>
      <ul>
        <li
          v-for="(item, index) in oldSearchList"
          :key="index"
          @click="onSearch(item.content)"
        >
          {{ item.content }}
        </li>
      </ul>
    </div>

    <!-- 没有结果 -->
    <div class="none" v-if="!haveShop">
      <img
        src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/searchNone.png"
        alt=""
      />
      没有结果哦！
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";
import req from "@/utils/index";
export default {
  data() {
    return {
      searchValue: "",
      shopList: [
        {
          id: 1,
          tourl: "",
          imgurl:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/bank.png",
          title: "xxxxx",
        },
      ],
      haveShop: false,
      oldSearchList: [],
    };
  },
  methods: {
    //   搜索
    onSearch(val) {
      // Toast(val);
      this.searchValue = val;
      req(
        "get",
        "/qySearch/search?mobile=" +
          window.localStorage.getItem("phone") +
          "&searchContent=" +
          val,
        {}
      ).then((res) => {
        // console.log(res);
        if (res.rspCode == "000000") {
          if (res.data.result.length == 0) {
            this.haveShop = false;
          } else {
            this.shopList = res.data.result;
            this.haveShop = true;
          }
        }
      });
    },
    // 点击取消
    onCancel() {
      this.$router.push({ name: "index" });
    },
    // 去商品详情
    toShopMsg(item) {
      // console.log(item);
      if (item.productUrl.substring(0, 4) == "http") {
        window.location.href = item.productUrl + `&tsToken=${window.localStorage.getItem('logintoken')}`;
      } else {
        this.$router.push({
          name: "creatOrder",
          query: {
            goodsNo: item.productUrl,
            didPay: "noYet",
            isGsq: false,
          },
        });
      }
    },
    // 清除历史搜索
    clearOldSearch() {
      req(
        "get",
        `/qySearch/delSearchHistory?mobile=${window.localStorage.getItem(
          "phone"
        )}`,
        {}
      ).then((res) => {
        // console.log(res)
        if (res.rspCode == "000000") {
          this.getOldHistory();
        }
      });
    },
    // 获取搜索历史
    getOldHistory() {
      req(
        "get",
        "/qySearch/getSearchHistory?mobile=" +
          window.localStorage.getItem("phone"),
        {}
      ).then((res) => {
        // console.log(res);
        if (res.rspCode == "000000") {
          this.oldSearchList = res.data;
        }
      });
    },
  },
  created() {
    this.getOldHistory();
  },
};
</script>

<style lang='scss' scoped>
#search {
  background-color: #fff;
}
// 没有搜索结果
.none {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3rem;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  font-size: 0.4rem;
  color: #676767;
  img {
    width: 3rem;
  }
}
// 历史搜索
.oldSearch {
  width: 90%;
  margin: auto;
  h3 {
    position: relative;
    img {
      position: absolute;
      top: 50%;
      right: 0.1rem;
      transform: translateY(-50%);
      width: 0.4rem;
    }
  }
  ul {
    li {
      display: inline-block;
      padding: 0.1rem 0.3rem;
      border: 1px solid #ccc;
      background-color: #ccc;
      color: #000;
      border-radius: 15px;
      margin-left: 0.3rem;
    }
  }
}
.box {
  display: inline-block;
  width: 25%;
  text-align: center;
  padding: 0.3rem 0;
  box-sizing: border-box;
  .van-badge__wrapper {
    display: block;
    margin: 0.3rem auto;
    width: 50%;
  }
  img {
    width: 100%;
    margin-bottom: 0.1rem;
  }
  .van-badge {
    border-radius: 999px 999px 999px 0;
  }
  .fiveSela {
    position: absolute;
    // top: -1rem;
    width: 80%;
    left: 50%;
    font-size: 0.25rem;
    color: #ffffff;
    transform: translateX(-50%) translateY(-50%);
    background: linear-gradient(90deg, #ff902d, #ffb65a);
    border-radius: 0 0.3rem 0.3rem 0.3rem;
  }
}
.van-search__content {
  border-radius: .5rem;
}
/deep/.van-badge.van-badge--fixed {
  right: -.2rem;
  border-radius: 100px 100px 100px 0px;
}
</style>